<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			var dataset=[
						 [0.5,0.5],[0.7,0.8],[0.4,0.9],[0.11,0.32],[0.88,0.25],
						 [0.75,0.12],[0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]
						];
			var height=600;
			var width=600;
			var padding={left:50,top:20,right:50,bottom:20};
			var xAxisWidth=width-padding.left-padding.right;
			var yAxisHeight=height-padding.top-padding.bottom;
			var svg=d3.select("body").append("svg").attr("height",height).attr("width",width);
			//定义比例尺
			var xScale=d3.scaleLinear()
				.domain([0,Math.round(d3.max(dataset,function(d){return d[0];}))*1.1])
				.range([0,xAxisWidth]);
			var yScale=d3.scaleLinear()
				.domain([0,Math.round(d3.max(dataset,function(d){return d[1];}))*1.1])
				.range([0,yAxisHeight]);
			//添加圆形散点
			var circle=svg.selectAll("circle")
				.data(dataset)
				.enter()
				.append("circle")
				.attr("cx",function(d,i){return padding.left+xScale(d[0]);})
				.attr("cy",function(d,i){return height-padding.bottom-yScale(d[1]);})
				.attr("r","5px")
				.attr("fill","yellow");
			//添加坐标轴
			var xAxis=d3.axisBottom(xScale);
			var yAxis=d3.axisLeft(yScale);
			yScale.range([yAxisHeight,0])
			svg.append("g")
			   .attr("transform","translate("+padding.left+","+(padding.top+yAxisHeight)+")")
			   .call(xAxis);
			svg.append("g")
			   .attr("transform","translate("+padding.left+","+(padding.top)+")")
			   .call(yAxis);
		</script>
		
	</body>
</html>
